<template>
    <el-card style="margin-bottom: 10px;">
        <el-button>普通按钮</el-button>
        <el-button type="primary" @click="showAlert('primary')">Primary按钮</el-button>
        <el-button type="success" @click="showAlert('success')">Success按钮</el-button>
        <el-button type="info" @click="showAlert('info')">Info按钮</el-button>
        <el-button type="warning" @click="showAlert('warning')">Warning按钮</el-button>
        <el-button type="danger" @click="showAlert('error')">Danger按钮</el-button>
    </el-card>
    <el-card style="margin-bottom: 10px;">
        <el-input v-model="input" placeholder="请输入内容" style="width: 300px; margin-top: 20px"></el-input>
    </el-card>
</template>

<script setup name="content">
    import { ref } from 'vue'
    const input = ref('')
    import { ElMessage } from 'element-plus'

    function showAlert(type) {
        ElMessage({
            message: 'Hello ElementPlus',
            type: type
        })
    }
</script>